<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>个人博客</title>

</head>
<body>

	<div class="container">
		<div id="carousel1" class="carousel slide" data-ride="carousel">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example" data-slide-to="1"></li>
				<li data-target="#carousel-example" data-slide-to="2"></li>
			</ol>

			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img
						src="http://placehold.it/1140x360/C24704/FFFFFF&text=Wordpress">
					<div class="carousel-caption">http://placehold.it/1140x360/C24704/FFFFFF&text=Wordpress</div>
				</div>
				<div class="item">
					<img src="http://placehold.it/1140x360/FFE879&text=Joomla">
					<div class="carousel-caption">http://placehold.it/1140x360/FFE879&text=Joomla</div>
				</div>
				<div class="item">
					<img src="http://placehold.it/1140x360/AOEOA9/FFFF23&text=Drapal">
					<div class="carousel-caption">http://placehold.it/1140x360/AOEOA9/FFFF23&text=Drapal</div>
				</div>
				<!-- Controls -->
			</div>

			<!-- 轮播（Carousel）导航 -->
			<a href="#carousel1" data-slide="prev" class="left carousel-control">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a> <a href="#carousel1" data-slide="next"
				class="right carousel-control"> <span
				class="glyphicon glyphicon-chevron-right"></span></a>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-sm-3">
				<br>
				<div class="thumbnail">
					<img src="resources/images/tou.png" alt="头像">
					<div class="caption">
						<h3 align="center">张晨刚</h3>
						<p align="center">编写代码,改变世界</p>
						<p align="center">
							<a href="#" class="btn btn-primary" role="button">联系博主</a> <a
								href="#" class="btn btn-default" role="button">关注博主</a>
						</p>
					</div>
				</div>
				<div class="list-group">
					<a href="#" class="list-group-item active"><span
						class="glyphicon glyphicon-star"></span> 热门文章 </a>
					<c:forEach items="${hotArticles }" var="ha">
						<a href="article/${ha.id }/show" class="list-group-item"><span
							class="glyphicon glyphicon-thumbs-up badge">&nbsp;${ha.praise }</span>${ha.title}&nbsp;&nbsp;
						</a>
					</c:forEach>
				</div>
				<div class="list-group">
					<a href="#" class="list-group-item active"><span
						class="glyphicon glyphicon-star"></span> 相关文章 </a>
					<c:forEach items="${csdnArticles }" var="ca">
						<a href="${ca.url }" class="list-group-item"><span
							class="glyphicon glyphicon-thumbs-up badge">&nbsp;${ca.num }</span>${ca.title}&nbsp;&nbsp;
						</a>
					</c:forEach>
				</div>
			</div>
			<div class="col-sm-1"></div>
			<div class="col-sm-8">
				<div class="row">
					<div class="col-sm-12">
						<article class="panel"></article>
						<c:if test="${empty articles}">
							<div class="panel panel-warning">
								<div class="panel-body">
									<h2>
										该类别下没有文章&nbsp;&nbsp;&nbsp;&nbsp;<a href="article/add">去写一篇</a>
									</h2>
								</div>
							</div>
						</c:if>
						<c:forEach items="${articles }" var="a">
							<div class="row">
								<h2 class="post-title" align="center">${a.title }</h2>
							</div>
							<br>
							<div class="row">
								<div class="panel panel-default">
									<div class="panel-body">${a.content }</div>
								</div>
							</div>
							<div class="row">
								<div class="col-xs-3"></div>

								<div style="float: right;">
									&nbsp;&nbsp;<span class="glyphicon glyphicon-calendar"></span>
									<fmt:formatDate value="${a.time }" pattern="yyyy年MM月dd日" />
									&nbsp;&nbsp;
								</div>

								<div id="praise${a.id }" style="float: right;">
									<span class="glyphicon glyphicon-thumbs-up"></span><a>&nbsp;点赞</a>
									<b id="praisesum${a.id }">${a.praise }</b>&nbsp;
								</div>
								<div id="huifu${a.id }" style="float: right;">
									<span class="glyphicon glyphicon-comment"></span><a>&nbsp;评论</a>&nbsp;&nbsp;
								</div>
								<div style="float: right;">
									<span class="glyphicon glyphicon-search"></span><a
										href="article/${a.id }/show">&nbsp;阅读</a>&nbsp;&nbsp;
								</div>

							</div>
							<div class="row" id="text${a.id }" hidden="true">
								<br>
								<form method="post" action="article/comment">
									<input type="hidden" name="user.id" value="0${loginUser.id }">
									<input type="hidden" name="commentUser.id"
										value="0${a.user.id }"> <input type="hidden"
										name="article.id" value="${a.id }">
									<div class="col-sm-10">
										<input type="text" class="form-control" id="content"
											name="content" placeholder="写下你对这篇文章的看法">
									</div>
									<div class="col-sm-1">
										<button class="btn btn-default">评论</button>
									</div>
								</form>
							</div>

							<br>
							<br>

						</c:forEach>
					</div>
				</div>
				<nav class="pull-right">

					<ul class="pagination pagination-lg">
						<li><a href="./${url }?pageNo=${pageNo - 1}"
							aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
						</a></li>
						<c:forEach begin="0" end="9" var="a">
							<c:set var="apageNo">
								<fmt:formatNumber type="number"
									value="${(pageNo - pageNo%10)/10 }" maxFractionDigits="0"
									pattern="#" />${a%10}
							</c:set>
							<c:if test="${apageNo != 0 }">
								<li <c:if test="${pageNo == apageNo }">class="active"</c:if>><a
									href="./${url }?pageNo=${apageNo}">${apageNo } </a></li>
							</c:if>
						</c:forEach>
						<li><a href="./${url }?pageNo=${pageNo + 1}"
							aria-label="Next"> <span aria-hidden="true">&raquo;</span>
						</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var huifu = $("div[id^='huifu']");
		var text = $("div[id^='text']");
		huifu.each(function() {
			$(this).click(function() {
				var text = $(this).attr("id").replace("huifu", "text");
				$("#" + text).slideToggle('show', function() {
				});

			});
		});

		var praise = $("div[id^='praise']");
		praise.each(function() {
			$(this).click(
					function() {
						$.ajax({
							url : 'article/praise/'
									+ $(this).attr("id").replace("praise", ""),// 跳转到 action    
							type : 'get',
							success : function(data) {
							}
						});
						var praisesum = $(this).attr("id").replace("praise",
								"praisesum");
						$("#" + praisesum).html(
								addOne(parseInt($("#" + praisesum).text())));
					});
		});

		function addOne(num) {
			return num + 1;
		}
	</script>
</body>
</html>